/*
 * @Date: 2019-12-2
 * @Author: xuechengwu <xuechengwu@erayt.com>
 * @Description: 水平线图层
 */
import BaseLayer from './BaseLayer';
import Line from '../base/Line';
import Point from '../core/Point';
import Circle from '../base/Circle';
import Layer from '../core/Layer';
import Event from '../event/Event';
import Color from '../core/Color';
import OChart from '../core/OChart';

class HorizonLine extends Layer {
  constructor(canvas, options) {
    super(canvas);
    this.id = options.id;
    this.width = options.width;
    this.height = options.height;
    this.price = options.price;
    this.color = options.color || '#333333';
    this.movable = options.movable || false;
    this.selectable = options.selectable === undefined ? true : options.selectable;
    this.legend = options.legend;
    this.base = options.base || 0;
    this.yStep = options.yStep || 1;
    this.onMove = options.onMove;
    this.isSelected = options.isSelected || false;
    this.onSelected = options.onSelected;
  }

  /**
   * 渲染
   */
  make() {
    this.clearEventListener();
    this.childs.splice(0, this.childs.length);
    const y = (this.price - this.base) * this.yStep;
    this.lineNode = new Line(this.canvas, {
      from: new Point(this.position.x, y),
      to: new Point(this.position.x + this.width, y),
      color: this.color
    });
    this.addChild(this.lineNode);
    if (this.movable && this.selectable) {
      this.circle = new Circle(this.canvas, 8);
      this.circle.setPosition(this.position.x + this.width * 2 / 3, y);
      this.circle.setColor(new Color(this.color));
      if (!this.isSelected) {
        this.circle.visible = false;
      }
      this.addChild(this.circle);
      this.circle.addEventListener(OChart.version === OChart.VERSION.PC ? Event.EVENT_MOUSE_MOVE : Event.EVENT_TOUCH_MOVE, (e) => {
        const { curPoint } = e;
        const currentPrice = (curPoint.y - this.position.y) / this.yStep + this.base;
        this.price = currentPrice;
        this.circle.setPosition(this.circle.position.x, curPoint.y);
        this.lineNode.setPosition(this.lineNode.position.x, curPoint.y);
        this.canvas.paint();
        this.onMove && this.onMove({
          id: this.id,
          price: currentPrice
        });

      });
    }
    console.log('selectable', this.selectable)
    if (this.selectable) {
      this.lineNode.addEventListener(OChart.version === OChart.VERSION.PC ? Event.EVENT_CLICK : Event.EVENT_TAP, (e) => {
        console.log(1111111111111);
        if(this.movable) {
          this.circle.visible = true;
        }
        this.canvas.paint();
        this.onSelected && this.onSelected({
          id: this.id
        });
      });
    }
    if (this.legend) {
      const legends = this.legend({
        x: this.position.x,
        y,
        price: this.price
      });
      if (legends) {
        for(let legend of legends) {
          this.addChild(legend);
        }
      }
    }


  }
}

/**
 * 水平层
 */
export default class HorizonLayer extends BaseLayer {
  constructor(canvas, options) {
    super(canvas);
    this.width = options.width || canvas.width;
    this.height = options.height || canvas.height;
    /**
     * 数据结构
     * {
     *   id: 线条的唯一标识，
     *   price: 价格
     *   color: 线条颜色
     *   movable: 是否可移动， 默认不能移动
     *   selectable: 是否可选， 默认可选
     *   legend: Function 用于返回线条上方的Legend
     * }
     * @type {*|Array}
     */
    this.data = options.data || [];
    this.base = options.base || 0; // Y轴基线数值
    this.yStep = options.yStep || 0;
    this.onSelected = options.onSelected;
    this.onMoved = options.onMoved;
  }

  /**
   * 水平线被选中
   * @param id
   */
  onHorizonSelected = ({ id }) => {
    this.selectedLine = id;
    this.make();
    this.canvas.paint();
    this.onSelected && this.onSelected(id);
  }

  /**
   * 水平线移动
   * @param id
   * @param price
   */
  onLineMove = ({id, price}) => {
    let index = this.data.findIndex(item => item.id === id);
    if (index !== -1) {
      this.data[index].price = price;
    }
    this.onMoved && this.onMoved({id, price});
  }

  /**
   * 渲染
   */
  make() {
    this.clearEventListener();
    this.childs.splice(0, this.childs.length);
    for(let i = 0; i < this.data.length; i++) {
      const line = this.data[i];
      const y = (line.price - this.base) * this.yStep;
      if (y > this.position.y + this.height || y < this.position.y) {
        continue;
      }
      const horizonLine = new HorizonLine(this.canvas, {
        ...line,
        base: this.base,
        yStep: this.yStep,
        onSelected: this.onHorizonSelected,
        isSelected: this.selectedLine === line.id,
        onMove: this.onLineMove,
        width: this.width,
        height: this.height
      });
      horizonLine.make();
      this.addChild(horizonLine);
    }
  }
}
